<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模仿24.taobao.com图片切换效果-Jquery插件库-林氏智造</title>
		<link href="css/reset.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="css/ui.css" rel="stylesheet" />
		<link href="css/shCoreDefault.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.10.0.min.js"></script>
		<script type="text/javascript" src="js/shCore.js"></script>
		<script type="text/javascript" src="js/shBrushCSharp.js"></script>
		<script type="text/javascript">SyntaxHighlighter.all();</script>
		<script type="text/javascript" src="js/lin_taobao24.1.0.js"></script>
		<script type="text/javascript">
			$(function(){
				$('#L_move_handle').lin_taobao24();
			});
		</script>
	</head>
	<body id="main">
		
		<div class="slidebar">
			<a href="http://www.0773linji.com" title="林氏智造" class="logo">林氏智造</a>
			<div class="slidebar_title">Jquery<span class="ver">插件库</span></div>
            <iframe src="../menu.html" frameborder="0"></iframe>
		</div>
		
		<div class="content">
			
			<div class="caption"><h2>模仿24.taobao.com图片切换效果</h2><span class="file">Define in : lin_taobao24.1.0.js</span></div>
			
			<div class="mod_desc">
        			<p>根据获取不同滚动区域的方向值，选择不同的滚动特效，这个效果就是普通图片滚动的加强版，详细的请看源代码不是很复杂！</p>
    			</div>
    			
    			<h3 class="title_lv2">
    				$("<span>type</span>").lin_taobao24([ <em>options</em> ]);
    			</h3>
    			
    			<dl class="deps">
        			<dt>依赖</dt>
        			<dd>JS : jquery-1.10.0.min.js</dd>
        			<dd>浏览器 : ie7+</dd>
    			</dl>
    			
    			<div class="params_box">
				<h5>参数</h5>
				<ul class="params_list">
					<li>
						<dl>
							<dt>target</dt>
							<dd>String</dd>
						</dl>
						<div class="params_desc">
							<span class="type required">必需</span>
							<p>target DOM元素ID或者DOM元素class,对匹配元素进行插件绑定。</p>
						</div>
					</li>
					<li>
						<dl>
							<dt>options</dt>
							<dd>Object</dd>
						</dl>
						<div class="params_desc">
							<span class="type optional">可选</span>
							<p>多选形式的可配置参数。</p>
						</div>
					</li>
				</ul>
			</div>
			
			<div class="article_box">
        			<p>下表列出了options参数介绍。</p>
    			</div>
    			
    			<table class="props_tb">
        <colgroup>
            <col style="width:130px">
            <col style="width:100px">
            <col style="width:70px">
            <col style="width:370px">
        </colgroup>
        <thead>
            <tr class="even">
                <th>参数</th>
                <th>数据类型</th>
                <th>默认值</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><b class="name">moveClass</b></td>
                <td><span class="type">String</span></td>
                <td><span class="normal">.L_move</span></td>
                <td class="t_l">
                    <p>移动包含元素样式,样式集合第一个元素为主移动元素</p>
                    <p>(此元素必须填写这些属性:移动方向data_direction="right" 移动距离data_px="239")</p>
                </td>
            </tr>
            <tr class="even">
                <td><b class="name">targetObj</b></td>
                <td><span class="type">String</span></td>
                <td><span class="normal">div</span></td>
                <td class="t_l">
                    <p>移动元素内的子元素</p>
                    <p>(可以是标签名或者类名)</p>
                </td>
            </tr>
            <tr>
                <td><b class="name">speed</b></td>
                <td><span class="type">int</span></td>
                <td><span class="normal">500</span></td>
                <td class="t_l">
                    <p>移动速度</p>
                </td>
            </tr>
            <tr class="even">
                <td><b class="name">autoTime</b></td>
                <td><span class="type">int</span></td>
                <td><span class="normal">5000</span></td>
                <td class="t_l">
                    <p>自动播放时间</p>
                </td>
            </tr>
            <tr>
                <td><b class="name">direction</b></td>
                <td><span class="type">int</span></td>
                <td><span class="normal">1</span></td>
                <td class="t_l">
                    <p>方向</p>
                    <p><b>1</b> 正方向</p>
                    <p><b>2</b> 负方向</p>
                </td>
            </tr>
            <tr class="even">
                <td><b class="name">preBtn</b></td>
                <td><span class="type">String</span></td>
                <td><span class="normal">.lin_move_pre</span></td>
                <td class="t_l">
                    <p>前按钮样式</p>
                </td>
            </tr>
            <tr>
                <td><b class="name">nextBtn</b></td>
                <td><span class="type">String</span></td>
                <td><span class="normal">.lin_move_next</span></td>
                <td class="t_l">
                    <p>后按钮样式</p>
                </td>
            </tr>
        </tbody>
    </table>
    
    
    <div class="example_box">
        <h5>例子一：基本调用</h5>
        <p>CSS</p>    
        <div class="code_box">
        		<pre class="brush: csharp;">.lin_mainWrap{border:1px solid #e4e4e4; width:719px; height:459px;}
.lin_moveWrap{position:relative; overflow:hidden;border:1px solid #e4e4e4;}
.lin_move_banner,.lin_move_banner_2{width:479px; height:229px; border-bottom:none; border-left:none; border-top:none;}
.lin_move_banner_2,.lin_move_banner_3,.lin_move_banner_5{width:239px; border:none;height:229px; }
.lin_move_banner_3,.lin_move_banner_5{border-right:1px solid #e4e4e4;border-top:1px solid #e4e4e4;}
.lin_move_banner_5{border-right:none;}
.lin_move_btn{border:none; background-color:#000; width:239px; height:229px;}
.lin_move_pre,.lin_move_next{display:block; background-color:#b2a4a1; height:114px;}
.lin_move_next{border-top:1px solid #FFF;}
.lin_move_btn a:hover{background-color:#5ac612;}
.lin_move_banner_x .lin_L_move_sub{float:left; display:inline;}
.lin_move_banner_x .lin_L_move{width:1195px;}</pre>
        </div>
		<p>JS</p>    
        <div class="code_box">
        		<pre class="brush: csharp;">$('#L_move_handle').lin_taobao24();  
		</pre>
        </div>        
        
        <div class="demo_box">
            
           
           <div class="lin_mainWrap" id="L_move_handle">
            	<div class="lin_moveWrap fl lin_move_banner">
                	<div class="lin_L_move" data_direction="bottom">
                    	<div class="lin_L_move_sub"><img src="css/images/p479-229.png"/></div>
                        <div class="lin_L_move_sub"><img src="css/images/p479-229-2.jpg"/></div>
                    	<div class="lin_L_move_sub"><img src="css/images/p479-229.png"/></div>
                        <div class="lin_L_move_sub"><img src="css/images/p479-229-2.jpg"/></div>
                        <div class="lin_L_move_sub"><img src="css/images/p479-229.png"/></div>                        
                    </div>
                </div>
            	<div class="lin_moveWrap fl lin_move_banner_2 lin_move_banner_x">
                	<div class="lin_L_move" data_direction="left" data_px="239">
                    	<div class="lin_L_move_sub"><img src="css/images/p239-229-5.jpg"/></div>
                        <div class="lin_L_move_sub"><img src="css/images/p239-229-2.jpg"/></div>
                     	<div class="lin_L_move_sub"><img src="css/images/p239-229-3.jpg"/></div>
                        <div class="lin_L_move_sub"><img src="css/images/p239-229-4.jpg"/></div>  
                        <div class="lin_L_move_sub"><img src="css/images/p239-229-6.jpg"/></div>                     
                    </div>
                </div> 
            	<div class="lin_moveWrap fl lin_move_banner_3 lin_move_banner_x">
                	<div class="lin_L_move" data_direction="right" data_px="239">
                    	<div class="lin_L_move_sub"><img src="css/images/p239-229-7.jpg"/></div>
                        <div class="lin_L_move_sub"><img src="css/images/p239-229-8.jpg"/></div>
                     	<div class="lin_L_move_sub"><img src="css/images/p239-229-3.jpg"/></div>
                        <div class="lin_L_move_sub"><img src="css/images/p239-229-4.jpg"/></div>  
                        <div class="lin_L_move_sub"><img src="css/images/p239-229-5.jpg"/></div>
                    </div>
                </div>
            	<div class="lin_moveWrap lin_move_banner_5 fl lin_move_banner_x">
                	<div class="lin_L_move" data_direction="left" data_px="239">
                    	<div class="lin_L_move_sub"><img src="css/images/p239-229-5.jpg"/></div>
                        <div class="lin_L_move_sub"><img src="css/images/p239-229-2.jpg"/></div>
                     	<div class="lin_L_move_sub"><img src="css/images/p239-229-8.jpg"/></div>
                        <div class="lin_L_move_sub"><img src="css/images/p239-229-4.jpg"/></div>  
                        <div class="lin_L_move_sub"><img src="css/images/p239-229-7.jpg"/></div>
                    </div>
                </div>
            	<div class="lin_moveWrap  lin_move_btn fl">
                	<a href="javascript:void(0);" title="上" class="lin_move_pre"></a>
                    <a href="javascript:void(0);" title="下" class="lin_move_next"></a>
                </div>                                                               
            </div>
		
            
        </div>
        
    </div>
    
   
    
    
    <div class="download">
        <h3>立即下载</h3>
        <div class="download_box">
            <a href="#" target="_blank" class="btn_download btn_download_wide">
                <span class="icon_box"><s class="icon_download"></s></span>
                <span class="title">lin_taobao24</span>
                <span class="version">version : 1.0</span>
            </a>
        </div>
    </div>
    
    <div class="download">
        <h3>联系我</h3>
        <div class="download_box">
           <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=317365887&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:317365887:53" alt="请注明通过林氏智造发现此QQ" title="请注明通过林氏智造发现此QQ"/></a>
        </div>
    </div>
			
			
		</div>
		
	</body>
</html>
